<template>
	<view class="edit-address address-wrap">
		<u-navbar
			title="编辑地址"
			:autoBack="true"
			placeholder
		>
		</u-navbar>
		
		<view class="address-form">
			<u--form
				labelPosition="left" labelWidth="80"
				:model="model" errorType="border-bottom"
				:rules="rules"
				ref="form"
			>
				<u-form-item
					label="收货人"
					prop="name"
					borderBottom
				>
					<u--input
						v-model="model.name"
						border="none"
						placeholder="请输入收货人姓名"
					></u--input>
				</u-form-item>
				<u-form-item
					label="手机号"
					prop="phone"
					borderBottom
				>
					<u--input
						v-model="model.phone"
						border="none"
						placeholder="请输入收货人手机号码"
					></u--input>
				</u-form-item>
				<u-form-item
					label="地址"
					prop="address"
					borderBottom
					@click="chooseLocation"
				>
					<u--input
						v-model="model.address"
						disabled
						disabledColor="#ffffff"
						placeholder="请输入收货地址"
						border="none"
					></u--input>
					<template #right>
						<u-icon
							name="arrow-right"
						></u-icon>
					</template>
				</u-form-item>
				<u-form-item
					label="设置默认地址"
					prop="default"
					borderBottom
					labelWidth="100"
				>
					<template #right>
						<u-switch v-model="model.default" activeColor="#f56c6c"></u-switch>
					</template>
				</u-form-item>
			</u--form>
		</view>
		<view class="submit-button">
			<u-button text="提交" shape="circle" color="#f56c6c" @click="submit"></u-button>
		</view>
		<u-toast ref="uToastRef"></u-toast>
	</view>
</template>

<script lang="ts" setup>
	import { ref,getCurrentInstance,onMounted } from 'vue'
	import {onLoad} from "@dcloudio/uni-app";
	
	const { proxy }: any = getCurrentInstance()
	const form = ref()
	const uToastRef = ref()
	const model = ref({
		name: '哈哈哈',
		phone: '13888888888',
		address: '广东省广州市荔湾区中山七路恩龙里34号陈家祠广场',
		default: true,
		aid: '6d3a0'
	})
	const rules = ref({
		name: {
			type: 'string',
			required: true,
			message: '请填写收货人',
			trigger: ['blur', 'change']
		},
		phone: [
			{
				required: true, 
				message: '请输入手机号',
				trigger: ['change','blur'],
			},
			{
				validator: (rule, value, callback) => {
					return uni.$u.test.mobile(value);
				},
				message: '手机号码不正确',
				trigger: ['change','blur'],
			}
		],
		address: {
			type: 'string',
			required: true,
			message: '请填写地址',
			trigger: ['blur', 'change']
		}
	})
	
	
	const chooseLocation = () => {
		uni.chooseLocation({
			success: function (res) {
				model.value.address = res.address + res.name
			}
		})
	}
	
	
	const submit = () => {
		form.value.validate().then(res => {
			let storageInfo = uni.getStorageSync("info")
			let data = {
				userId: storageInfo.id,
				name: model.value.name,
				phone: model.value.phone,
				address: model.value.address,
				default: model.value.default,
				aid: model.value.aid
			}
			proxy.ajax(proxy.api.updateAddress,"POST", data, function(resp: any){
				uToastRef.value.show({
					type: 'success',
					message: "修改成功",
					complete(){
						uni.navigateTo({
							url: "/user/address_list/address_list"
						})
					}
				})
				
			})
		}).catch(errors => {
			uni.$u.toast('校验失败')
		})
	}
	
	onMounted(()=>{
		let storageInfo = uni.getStorageSync("info")
		let data = {
			userId: storageInfo.id,
			aid: model.value.aid
		}
		proxy.ajax(proxy.api.getAddressByAid,"POST", data, function(resp: any){
			model.value = resp.data.entity
		})
	})
	
	onLoad((options)=>{
	  model.value.aid = options!.aid
	})
</script>
